<template>
	<div class="back_contain_n mine-account">
		<div class="leftList">
			<li v-for="(item,index) in weekParamList" :key="item.id"
				:class="{'active': viewType == item.dutyDay}"
				@click="changeView(item)"
			>
				<span>{{item.name}}</span>
			</li>
			<div style="display: flex;">
				<p v-if="weekParamList.length < 5 && hasRole('plan:produce:add')" @click="addDialog = true" class="zll-botton issue_zll">新建</p>
				<p v-if="weekParamList.length !== 0&& hasRole('plan:produce:delete')" @click="deleteWeekParam()" class="zll-botton issue_zll reject">删除</p>
			</div>
		</div>
		<div class="mainTable" v-if="weekParamList.length > 0">
			<div class="top_one">
				<div class="ban_ci" >
					<li @click="changeBanCi(person)" :class="{'active': currentChooseBanCi.whiteDay == person.whiteDay}" 
						v-for="(person,index) in onDutyPersonList" :key="person.id">
						<img v-if="currentChooseBanCi.whiteDay == person.whiteDay" :src="person.whiteDay== '1' ? require('@/assets/back_manage_img/baiban1.png') : require('@/assets/back_manage_img/yeban1.png')" alt="">
						<img v-else :src="person.whiteDay== '1' ? require('@/assets/back_manage_img/baiban2.png') : require('@/assets/back_manage_img/yeban2.png')" alt="">
						<span>{{person.whiteDay=='1'?'白班':'夜班'}} {{person.timeRange}}</span>
					</li>
				</div>
				<template v-if="!isHiddenBtn">
					<p v-if="!isEdit " @click="isEdit = true" class="issue_zll edit"><i class="el-icon-edit-outline" ></i> 编辑</p>
					<p v-if="isEdit" @click="saveOnDutyProduct" class="issue_zll save"><i class="el-icon-tickets"></i> 保存</p>
				</template>

				<div class="_banzhang">
					<span>班长</span>
					<el-select class="_right" clearable :disabled="!isEdit" v-model="currentChooseBanCi.userId" placeholder="值班人" style="width: 200px">
						<el-option v-for="(item,index) in userList" :key="index" :label="item.userName"
								:value="item.id"  />
					</el-select>
				</div>

			</div>
			<div class="tableList">
				<table>
					<tr>
						<th width="8%">设备号</th>
						<th width="9%">计划类型</th>
						<th width="10%">计划号</th>
						<th width="9%">计划名称</th>
						<th width="20%">规格</th>
						<th width="8%">单件(万支)</th>
						<th width="8%">计划(万支)</th>
						<th width="8%">设备状态</th>
						<th width="8%">操作工</th>
						<th width="12%">备注</th>
					</tr>
				</table>
				<div class="over_t">
					<table v-for="(item, key) in onDutyProductMap" :key="key" style="margin-top: 20px">
						<tr class="_key_bg"><td colspan="10"><span class="el_icons el-icon-position"></span>{{key}}</td></tr>
						<tr v-for="(prod,index) in item" :key="index">
							<td width="8%" @click="openProductDetail(prod,key)"><p class="_line">{{ prod.deviceCode }}</p></td>
							<td width="9%"><p>{{ prod.planTypeCn }}</p></td>
							<td width="10%"><p>{{ prod.planCode }}</p></td>
							<td width="9%"><p>{{ prod.planName }}</p></td>
							<td width="20%"><p>{{ prod.gradeValue }}</p></td>
							<td width="8%"><p>{{ prod.thNumber }}</p></td>
							<td width="8%"><p>{{ prod.totalNum }}</p></td>
							<td width="8%">
<!--								<p >{{ prod.productStatusCn }}</p>-->
								<p
								   :class="{'green': prod.productStatusCn === '生产', 'yellow': prod.productStatusCn === '待机', 'grey': prod.productStatusCn === '空置'}">
									{{ prod.productStatusCn }}
								</p>
								<!--<p v-show="isEdit">-->
									<!--<el-select v-model="prod.productStatus" placeholder="" class="text_center" clearable>-->
										<!--<el-option label="空置" value="0"></el-option>-->
										<!--<el-option label="待机" value="1"></el-option>-->
										<!--<el-option label="生产" value="2"></el-option>-->
									<!--</el-select>-->
								<!--</p>-->
							</td>
							<td width="8%">
								<p >{{ prod.operateUserName }}</p>
								<!--<p v-show="isEdit ">-->
									<!--<el-input  v-model="prod.operateUserName" placeholder="" class="text_center"-->
									<!--clearable></el-input>-->
								<!--</p>-->
							</td>
							<td width="12%">
								<p v-show="!isEdit ">{{ prod.remark }}</p>
								<p v-show="isEdit"><el-input v-model="prod.remark" placeholder="" class="text_center"
											 clearable></el-input>
								</p>
							</td>
						</tr>
					</table>
				</div>
			</div>

			<div class="zll-dialog">
				<popout title="包装生产任务下发机台" :visible.sync="dialogTable" v-if="dialogTable" class="largeSize">
					<div slot="content" style="width: calc(100% - 100px);position: absolute;top: 30px;">
						<div class="_dialogTable_title">
							<span>{{ currentKey }}</span> / 
							<span>{{ currentCode }}</span>
						</div>
						<div class="_dialogTable_middle">
							<div class="_part _part1">
								<span>设备状态：</span>
								<!--<el-radio-group v-model="chooseProdPlan.productStatus">-->
									<!--<el-radio label="0">空置</el-radio>-->
									<!--<el-radio label="1">生产</el-radio>-->
									<!--<el-radio label="2">待机</el-radio>-->
								<!--</el-radio-group>-->

								<el-select style="width: 60%" v-model="chooseProdPlan.productStatus" placeholder="" class="text_center">
									<el-option label="空置" value="0"></el-option>
									<el-option label="待机" value="1"></el-option>
									<el-option label="生产" value="2"></el-option>
								</el-select>
							</div>
							<div class="_part _part2">
								<span>操作工：</span>
								<el-select filterable clearable v-model="chooseProdPlan.person1" placeholder="" class="text_center">
									<el-option v-for="(item,index) in getPuGong()" :key="index" :label="item.userName"
											   :value="item.userName"/>
								</el-select>
								<el-select filterable clearable v-model="chooseProdPlan.person2" placeholder="" class="text_center">
									<el-option v-for="(item,index) in getPuGong()" :key="index" :label="item.userName"
											   :value="item.userName"/>
								</el-select>
								<el-select filterable clearable v-model="chooseProdPlan.person3" placeholder="" class="text_center">
									<el-option v-for="(item,index) in getPuGong()" :key="index" :label="item.userName"
											   :value="item.userName"/>
								</el-select>
								<el-select filterable clearable v-model="chooseProdPlan.person4" placeholder="" class="text_center">
									<el-option v-for="(item,index) in getPuGong()" :key="index" :label="item.userName"
											   :value="item.userName"/>
								</el-select>
							</div>
						</div>
						<div class="tableList">
							<table>
								<tr >
									<th></th>
									<th>计划号</th>
									<th>计划类型</th>
									<th>计划名称</th>
									<th >规格</th>
									<th>单件（万支）</th>
									<th>完成</th>
								</tr>
								<tr v-for="(item,index) in productPlans" :key="item.id">
									<td><el-checkbox v-model="item.checked"  @change="checked=>chooseProduct(checked,item)"></el-checkbox></td>
									<td>{{item.planCode}}</td>
									<td>{{item.planTypeCn}}</td>
									<td>{{item.planName}}</td>
									<td>{{item.gradeValue}}</td>
									<td>{{item.peieceNum}}</td>
									<td>{{item.completeNum}}</td>
								</tr>
							</table>
						</div>
					</div>
					<template slot="bottom">
						<p class="zll-botton Info" @click="dialogTable = false">关 闭</p>
						<p class="zll-botton" @click="saveProd">提 交</p>
					</template>
				</popout>
			</div>
		</div>
		<div v-else>
			<el-empty description="暂无数据"></el-empty>
		</div>
		<div class="zll-dialog">
			<popout title="创建日期标签" :visible.sync="addDialog" v-if="addDialog" class="bg_Size">
				<add ref="add" slot="content"></add>
				<template slot="bottom">
					<p class="zll-botton Info" @click="addDialog = false">关 闭</p>
					<p class="zll-botton" @click="()=>{this.$refs.add.submitForm('addForm')}">提 交</p>
				</template>
			</popout>
		</div>
	</div>
</template>

<script>
	import Add from './add.vue'
	import {formatDate} from "@/plugins/formatDate";

	export default {
		data() {
			return {
				addDialog: false,
				viewType: '',
				weekParamList: [],
				onDutyPersonList:[],
				isEdit: false,//是否编辑
				isHiddenBtn:true,
				isWhiteDay: '1',//白班1 夜班2
				currentDay:'',
				currentChooseBanCi:{userId:''},


				onDutyProductMap:{},
				dialogTable:false,
				productAllPlanMap:{},
				productPlans:[],

				chooseProdPlan:{
					productStatus:'0',
					checkObj:{}
				},

				currentKey:'',
				currentCode:'',

				userList:[],

			};
		},

		methods: {

			getSelectUsers() {
				let self = this;
				self.userList = [];
				self.$http({
					url: "/jinl/login/getLoginAndRoleSelectList",
					method: "post",
				}).then(resp => {
					if (resp.success) {
						self.userList = resp.result;
					}
				});
			},

			getPuGong(){
				if(this.userList.length == 0){
					return [];
				}
				let login = this.userList.filter((item)=>item.roleName =='普工');
				return login||[];
			},

			saveOnDutyProduct(){
				let self = this;
				let paramList = [];
				let user = self.userList.find((item)=> item.id == self.currentChooseBanCi.userId);
				for(let key in self.onDutyProductMap){
					let products = self.onDutyProductMap[key];
					for(let data of products){
						if(data.productStatus == '2' && !data.planId){
							self.$message.warning('请检查计划，生产中必须选择规格！');
							return;
						}
						if(data.productStatus == '2' && !data.operateUserName){
							self.$message.warning('请检查计划，生产中必须填写操作工！');
							return;
						}
						data.whiteDay = this.currentChooseBanCi.whiteDay;
						data.dutyDay = this.currentChooseBanCi.dutyDay;
						if(!user){
							self.$message.warning('先选择值班人！');
							return;
						}
						data.userId = user.id;
						data.userName = user.userName;
						paramList.push(data);
					}
				}
				if(paramList.length == 0){
					return;
				}
				console.log('=========paramList=======')
				console.log(paramList)
				self.$http({
					url: "/jinl/dutyprod/addBatchOnDutyProduct",
					method: "post",
					data: JSON.stringify(paramList),
					dataType: 'json',
					contentType: "application/json",
				}).then(resp => {
					if (resp.success) {
						self.$message.success('保存成功！');
						self.getParamList();
						self.dialogTable = false;
						self.isEdit = false;
					}
				});

			},

			chooseProduct(e,item){
				for(let key of this.productPlans){
					key.checked = false;
					if(key.id == item.id) {
						key.checked = e
					}
				}
				this.chooseProdPlan.checkObj = {};
				if (e) {
					this.chooseProdPlan.checkObj = item;
				}
			},

			saveProd(){
				if(!this.chooseProdPlan.checkObj.id && this.chooseProdPlan.productStatus != '0'){
					this.$message.warning('至少选择一条数据！');
					return;
				}
				console.log(this.chooseProdPlan)

				if(this.chooseProdPlan.productStatus == '0'){
					this.chooseProdPlan.productStatusCn = '空置'
				}else if(this.chooseProdPlan.productStatus == '1'){
					this.chooseProdPlan.productStatusCn = '待机'
				}else if(this.chooseProdPlan.productStatus == '2'){
					this.chooseProdPlan.productStatusCn = '生产'
				}
				if(this.chooseProdPlan.person1){
					this.chooseProdPlan.operateUserName = this.chooseProdPlan.person1;
				}
				if(this.chooseProdPlan.person2){
					if(this.chooseProdPlan.operateUserName){
						this.chooseProdPlan.operateUserName += ',';
					}
					this.chooseProdPlan.operateUserName += this.chooseProdPlan.person2;
				}
				if(this.chooseProdPlan.person3){
					if(this.chooseProdPlan.operateUserName){
						this.chooseProdPlan.operateUserName += ',';
					}
					this.chooseProdPlan.operateUserName += this.chooseProdPlan.person3;
				}
				if(this.chooseProdPlan.person4){
					if(this.chooseProdPlan.operateUserName){
						this.chooseProdPlan.operateUserName += ',';
					}
					this.chooseProdPlan.operateUserName += this.chooseProdPlan.person4;
				}

				console.log(this.chooseProdPlan)
				let index = this.onDutyProductMap[this.currentKey].findIndex((item)=>item.deviceCode == this.currentCode);
				this.onDutyProductMap[this.currentKey][index].productStatusCn = this.chooseProdPlan.productStatusCn;
				this.onDutyProductMap[this.currentKey][index].productStatus = this.chooseProdPlan.productStatus;
				this.onDutyProductMap[this.currentKey][index].operateUserName = this.chooseProdPlan.operateUserName;

				this.onDutyProductMap[this.currentKey][index].itemTypeId = this.chooseProdPlan.checkObj.itemTypeId;
				this.onDutyProductMap[this.currentKey][index].planId = this.chooseProdPlan.checkObj.id;
				this.onDutyProductMap[this.currentKey][index].planTypeCn = this.chooseProdPlan.checkObj.planTypeCn;
				this.onDutyProductMap[this.currentKey][index].planType = this.chooseProdPlan.checkObj.planType;
				this.onDutyProductMap[this.currentKey][index].planCode = this.chooseProdPlan.checkObj.planCode;
				this.onDutyProductMap[this.currentKey][index].planName = this.chooseProdPlan.checkObj.planName;
				this.onDutyProductMap[this.currentKey][index].gradeValue = this.chooseProdPlan.checkObj.gradeValue;
				this.onDutyProductMap[this.currentKey][index].thNumber = this.chooseProdPlan.checkObj.thNumber;
				this.onDutyProductMap[this.currentKey][index].peieceNum = this.chooseProdPlan.checkObj.peieceNum;
				this.onDutyProductMap[this.currentKey][index].totalNum = this.chooseProdPlan.checkObj.totalNum;
				this.dialogTable = false;
			},

			openProductDetail(prod,key){
				let self = this;
				console.log('===prod====')
				console.log(prod)
				console.log(key)
				self.currentKey = '';
				self.currentCode = '';
				if(!self.isEdit){
					return;
				}
				self.chooseProdPlan = {productStatus:'0',checkObj:{}};
				if(prod.productStatus){
					self.chooseProdPlan.productStatus = prod.productStatus;
				}
				let operateUserName = prod.operateUserName;
				if(operateUserName){
					let splits = operateUserName.split(",");
					let key = '';
					for(let i =0;i < splits.length;i++){
						key = 'person' +(i+1);
						self.$set(self.chooseProdPlan,key,splits[i]);
					}
				}
				let planId = prod.planId;
				self.dialogTable = true;
				self.$nextTick(()=>{
					self.productPlans = self.productAllPlanMap[key]||[];
					self.productPlans.forEach((p)=>{
						if(p.id == planId){
							self.$set(p,'checked',true);
							self.chooseProdPlan.checkObj = p;
						}else{
							self.$set(p,'checked',false)
						}

					});
					self.currentKey = key;
					self.currentCode = prod.deviceCode;
				})
			},

			changeView(val) {//切换日期tab
				let self = this;
				if(self.isEdit){
					self.$message.warning('请先保存后再切换！');
					return;
				}
				self.viewType = val.dutyDay;
				self.getParamList();
			},

			changeBanCi(val) {//切换白夜班
				if(this.isEdit){
					this.$message.warning('请先保存后再切换！');
					return;
				}
				this.currentChooseBanCi = Object.assign({},val);
				let chooseTab = this.currentChooseBanCi.dutyDay+'-'+this.currentChooseBanCi.whiteDay;
				let current = this.currentDay+'-'+this.isWhiteDay;
				if(chooseTab >= current){
					this.isHiddenBtn = false
				}else{
					this.isHiddenBtn = true
				}
				this.getOnDutyProductList();
			},


			getParamList() {
				let self = this;
				self.weekParamList = [];
				self.onDutyPersonList = [];
				self.$http({
					url: "/jinl/ondutyweek/getOnDutyWeekList",
					method: "post",
				}).then(resp => {
					if (resp.success) {
						if(resp.result.length > 0){
							let index = resp.result.findIndex((item)=> item.dutyDay == (self.viewType?self.viewType:self.currentDay));
							index = index > -1 ?index:resp.result.length -1;
							self.viewType = resp.result[index].dutyDay;
							self.onDutyPersonList = resp.result[index].onDutyPersons||[];
							self.currentChooseBanCi = self.onDutyPersonList.find((item) => item.whiteDay == self.isWhiteDay);
							let chooseTab = this.currentChooseBanCi.dutyDay+'-'+this.currentChooseBanCi.whiteDay;
							let current = this.currentDay+'-'+this.isWhiteDay;
							if(chooseTab >= current){
								this.isHiddenBtn = false
							}else{
								this.isHiddenBtn = true
							}
						}
						for(let data of resp.result){
							data.name = data.dutyDay+' ' + data.week;
							self.weekParamList.push(data);
						}
						self.getOnDutyProductList();
					}
				});
			},

			getOnDutyProductList() {
				let self = this;
				self.onDutyProductMap = {};
				let param = {dutyDay:self.currentChooseBanCi.dutyDay,whiteDay:self.currentChooseBanCi.whiteDay};

				self.$http({
					url: "/jinl/dutyprod/getOnDutyProductList",
					method: "post",
					params:param
				}).then(resp => {
					if (resp.success) {
						for(let key in resp.result){
							for(let data of resp.result[key]){
								data.id = data.id||'';
								data.itemTypeId = data.itemTypeId||'';
								data.deviceCode = data.deviceCode||'';
								data.planId = data.planId||'';
								data.planType = data.planType||'';
								data.planTypeCn = data.planTypeCn||'';
								data.planCode = data.planCode||'';
								data.planName = data.planName||'';
								data.gradeValue = data.gradeValue||'';
								data.thNumber = data.thNumber||'';
								data.peieceNum = data.peieceNum||'';
								data.totalNum = data.totalNum||'';
								data.productStatus = data.productStatus||'0';
								data.productStatusCn = data.productStatusCn||'空置';
								data.operateUserName = data.operateUserName||'';
								data.remark = data.remark||'';
								data.whiteDay = data.whiteDay||'';
								data.dutyDay = data.dutyDay||'';
							}
						}
						self.onDutyProductMap = resp.result;
						console.log('======================')
						console.log(self.onDutyProductMap)
					}
				});
			},

			getPlanManageMapList() {
				let self = this;
				self.productAllPlanMap = {};
				self.$http({
					url: "/jinl/plan/getPlanManageMapList",
					method: "post",
				}).then(resp => {
					if (resp.success) {
						self.productAllPlanMap = resp.result;
						console.log(self.productAllPlanMap)
						console.log(self.productAllPlanMap)
					}
				});
			},

			getCurrentTimeWhiteOrBlack(){
				let dayTime = formatDate(new Date(), 'hh:mm');
				let splits = dayTime.split(':');
				if(((parseInt(splits[0]) == 6 &&parseInt(splits[1]) >= 50)||parseInt(splits[0]) > 6)
					&&((parseInt(splits[0]) == 18 && parseInt(splits[1]) <= 20)||parseInt(splits[0]) < 18)){
					this.isWhiteDay = '1';
				}else{
					this.isWhiteDay = '2';
				}
				this.currentDay = formatDate(new Date(), 'yyyy-MM-dd');


			},

			deleteWeekParam() {
				let self = this;
				self.$confirm('确定删除该计划？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let param = self.weekParamList.find((item)=>item.dutyDay == self.viewType);
					self.$http({
						url: '/jinl/ondutyweek/deleteOnDutyWeek',
						method: "post",
						params: {id: param.id}
					}).then(resp => {
						if (resp.success) {
							self.getParamList();
							self.$message.success('删除成功！');
							return
						}
						self.$message.error(resp.message);
					});
				});
			},

			initData(){
				let self = this;
				self.$http({
					url: "/jinl/dutyprod/getOnDutyAndWhiteDay",
					method: "post",
				}).then(resp => {
					if (resp.success) {
						self.currentDay = resp.result.dutyDay;
						self.isWhiteDay = resp.result.whiteDay;

						self.weekParamList = [];
						self.onDutyPersonList = [];
						self.$http({
							url: "/jinl/ondutyweek/getOnDutyWeekList",
							method: "post",
						}).then(resp => {
							if (resp.success) {
								if(resp.result.length > 0){
									let index = resp.result.findIndex((item)=> item.dutyDay == (self.viewType?self.viewType:self.currentDay));
									index = index > -1 ?index:resp.result.length -1;
									self.viewType = resp.result[index].dutyDay;
									self.onDutyPersonList = resp.result[index].onDutyPersons||[];
									self.currentChooseBanCi = self.onDutyPersonList.find((item) => item.whiteDay == self.isWhiteDay);
									let chooseTab = this.currentChooseBanCi.dutyDay+'-'+this.currentChooseBanCi.whiteDay;
									let current = this.currentDay+'-'+this.isWhiteDay;
									if(chooseTab >= current){
										this.isHiddenBtn = false
									}else{
										this.isHiddenBtn = true
									}
								}
								for(let data of resp.result){
									data.name = data.dutyDay+' ' + data.week;
									self.weekParamList.push(data);
								}
								self.getOnDutyProductList();
							}
						});
					}
				});
			}
		},
		mounted() {
			let self = this;
			this.getSelectUsers();
			this.initData();
			this.getPlanManageMapList();

			self.$eventBus.$on("updatePlanIssue", function () {
				self.addDialog = false;
				self.initData();
			})
		},

		components: {Add}
	};
</script>

<style lang="scss" scoped>
	.mine-account {

		._dialogTable_title{
			width: 100%;line-height: 35px;
		}
		._dialogTable_middle {
			display: flex;height: 35px;align-items: center;margin-bottom: 10px;
			._part1 {
				width: 40%;
			}
			._part2 {
				width: 60%;
				display: flex;align-items: center;
				span {
					width: 60px;
				}
				.zll_input {
					width: calc(25% - 35px);margin: 0 10px;
				}
				.text_center {
					width: calc(25% - 35px);margin: 0 10px;
				}
			}
		}

		.top_one {
			display: flex;

			.ban_ci {
				display: flex;

				li {
					width: 130px;
					background: #ddd;
					color: #918d8d;
					line-height: 30px;
					height: 30px;
					text-align: center;
					margin-right: 15px;
					cursor: pointer;
					display: flex;align-items: center;justify-content: center;

					&.active {
						background: #2196f3;
						color: #fff;
					}
					img {
						width: 20px;height: 20px;margin-right: 5px;
					}
				}
			}
			._banzhang {
				line-height: 30px;height: 30px;display:flex;align-items: center;
				span {
					background: #2196f3;color: #fff;width: 80px;text-align: center;
				}
			}
		}

		.issue_zll {
			height: 26px;
			line-height: 26px;
			padding: 0 20px;
			margin: 0 10px;
			cursor: pointer;

			i {
				font-size: 16px;
			}

			&.edit {
				color: #2196f3;
				font-size: 14px;
			}

			&.save {
				color: #8bc34a;
				font-size: 14px;
			}
		}

		.leftList {
			display: flex;
			margin-bottom: 5px;
			margin-right: 20px;

			li {
				list-style: none;
				width: 150px;
				height: 30px;
				line-height: 28px;
				border-bottom: 1px solid #fff;
				color: #333;
				text-align: center;
				cursor: pointer;
				margin-bottom: 10px;
				transition: all .5s;
				position: relative;
				display: flex;
				justify-content: center;

				&.active {
					color: #ff9935;
					border-color: #ff9935;
					position: relative;
					font-weight: 600;
					font-size: 14px;
				}
			}
		}

		.tableList {
			margin-top: 20px;
			position: relative;

			.over_t {
				overflow-y: auto;
				height: calc(100vh - 285px);
			}

			.right_ii {
				margin-left: 10px;
				color: #2196f3;
				font-size: 16px;
				cursor: pointer;
			}

			table {
				width: 100%;
				border-collapse: collapse;
				border: 1px solid #e6e6e6;
				text-align: center;

				th {
					background: #ddd;
					color: #918d8d;
					font-weight: normal;
				}
				._key_bg {
					background: #dff1ff;
					td {
						text-align: left;
						.el_icons {
							margin: 0px 8px 0px 10px;
						}
					}
				}

				td {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					border: 1px solid #EBEEF5;

					p {
						padding: 0 5px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						&._line {
							font-weight: 600;color: #0c0c0c;cursor: pointer;
						}

						&.grey {
							color: #918d8d;
						}

						&.yellow {
							color: #fff;background: #ff9800;width: 60%;margin: 0 auto;
							height: 20px;line-height: 20px;border-radius: 5px;
						}
						&.green {
							color: #fff;background: #8BC34A;width: 60%;margin: 0 auto;
							height: 20px;line-height: 20px;border-radius: 5px;
						}
						&.blue {
							color: #2196f3;
						}
					}
				}

				tr {
					border: 1px solid #EBEEF5;
					height: 32px;
					line-height: 32px;
				}
			}
		}
	}
</style>
